<template>
    <div>
        <h2>我是首页</h2>
        <p>我是首页，哈哈哈</p> 
        <!-- 注意路径不要漏/ -->
        <router-link to="/home/news">新闻</router-link>
        <router-link to="/home/message">消息</router-link>
            <router-view></router-view>
        <h2>{{message}}</h2>
    </div>
</template>

<script>

export default {
    name:"Home",
    data(){
        return{
            message:'你好呀',
            path:'/home/news'
        }
    },
    // 当组件被创建出来就回调的函数
    created() {
        console.log(' home created');
       
        // document.title = '首页'
    },
    destroyed() {
         console.log(' home destroyed');
    },

    // 这两个组件，只有该组件被保持了状态使用了keep-alive，才是有效的
    // 一旦界面处于活跃状态执行此方法
    // 活跃的
    activated() {
         console.log('activated');
         this.$router.push(this.path);
    },
      // 一旦界面处于不活跃的状态执行此方法
    // 不活跃的
    deactivated() {
        // console.log(this.$route.path)
         console.log('deactivated');
        //  this.path = this.$route.path
    }

    // beforeRouteLeave(to,from,next){
    //     //导航离开该组件的对应路由时调用
    //     // 可以访问组件实例的'this'
    //     console.log(this.$route.path);
    //     this.path = this.$route.path;
    //     next()
    // }

 
    // // template都挂载成功之后
    // mounted(){
    //      console.log('mounted')
    // },
    // // 页面发生更新的时候
    // updated(){
    //     console.log('updated')
    // }
}
</script>

<style scoped>

</style>
